---
title: SvelteKit에서 마이그레이션
description: 기존 SvelteKit 프로젝트를 Astro로 마이그레이션하기 위한 팁
sidebar:
  label: SvelteKit
type: migration
stub: true
framework: SvelteKit
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
import { CardGrid, LinkCard } from '@astrojs/starlight/components';

[SvelteKit](https://kit.svelte.dev)은 Svelte 위에 웹 애플리케이션을 구축하기 위한 프레임워크입니다.

## SvelteKit과 Astro의 주요 유사점

SvelteKit과 Astro는 프로젝트 마이그레이션에 도움이 되는 몇 가지 유사점을 공유합니다.

- SvelteKit과 Astro는 모두 최신 JavaScript 정적 사이트 생성기이자 서버 측 렌더링 프레임워크입니다.

- SvelteKit과 Astro는 모두 [프로젝트 파일용으로 `src/` 폴더](/ko/basics/project-structure/#src)를 사용하고 [파일 기반 라우팅용 특수 폴더](/ko/basics/astro-pages/)를 사용합니다. 사이트의 페이지를 만들고 관리하는 것이 익숙하게 느껴질 것입니다.

- Astro는 [Svelte 컴포넌트 사용을 위한 공식 통합](/ko/guides/integrations-guide/svelte/)을 갖추고 있으며 Svelte용 여러 가지를 포함하여 [NPM 패키지 설치](/ko/guides/imports/#npm-패키지)를 지원합니다. Svelte UI 컴포넌트를 작성할 수 있으며 기존 컴포넌트 및 종속성의 일부 또는 전부를 유지할 수 있습니다.

- Astro와 SvelteKit 모두 [데이터용 헤드리스 CMS, API 또는 Markdown 파일](/ko/guides/data-fetching/)을 사용할 수 있습니다. 선호하는 콘텐츠 작성 시스템을 계속 사용할 수 있으며 기존 콘텐츠를 유지할 수 있습니다.

## SvelteKit과 Astro의 주요 차이점

Astro에서 SvelteKit 사이트를 다시 구축하면 몇 가지 중요한 차이점을 발견할 수 있습니다.

- Astro 사이트는 다중 페이지 앱인 반면 SvelteKit은 기본적으로 서버 측 렌더링을 사용하는 SPA (단일 페이지 애플리케이션)이지만 MPA 또는 전통적인 SPA를 생성할 수도 있고 앱 내에서 이러한 기술을 혼합하여 일치시킬 수도 있습니다.

- [컴포넌트](/ko/basics/astro-components/): SvelteKit은 [Svelte](https://svelte.dev)를 사용합니다. Astro 페이지는 [`.astro` 컴포넌트](/ko/basics/astro-components/)를 사용하여 구축되었지만 [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/ko/guides/framework-components/) 및 원시 HTML 템플릿도 지원할 수 있습니다.

- [콘텐츠 중심](/ko/concepts/why-astro/#콘텐츠-중심): Astro는 콘텐츠를 선보이고 필요할 때만 상호 작용할 수 있도록 설계되었습니다. 기존 SvelteKit 앱은 높은 클라이언트 측 상호 작용을 위해 구축될 수 있습니다. Astro에는 페이지 생성과 같은 콘텐츠 작업을 위한 기능이 내장되어 있지만 `.astro` 컴포넌트를 사용하여 복제하기가 더 어려운 대시보드와 같은 항목을 포함하려면 고급 Astro 기술이 필요할 수 있습니다.

- [Markdown 지원](/ko/guides/markdown-content/): Astro에는 내장 Markdown 지원이 포함되어 있으며 [특별한 프런트매터 YAML `layout` 속성](/ko/basics/layouts/#markdown-레이아웃)은 페이지 템플릿 작성에 파일별로 사용됩니다. SvelteKit Markdown 기반 블로그를 변환하는 경우 별도의 Markdown 통합을 설치할 필요가 없으며 구성 파일을 통해 레이아웃을 설정하지 않습니다. 기존 Markdown 파일을 가져올 수 있지만 Astro의 파일 기반 라우팅에는 각 페이지 경로에 대한 폴더가 필요하지 않으므로 재구성이 필요할 수 있습니다.

## SvelteKit에서 Astro로 전환

SvelteKit 블로그를 Astro로 변환하려면 블로그 테마 시작 템플릿으로 시작하거나 [테마 쇼케이스](https://astro.build/themes/)에서 더 많은 커뮤니티 블로그 테마를 탐색하세요.

공식 스타터 중 하나를 사용하여 새로운 Astro 프로젝트를 시작하려면 `--template` 인수를 `create astro` 명령에 전달할 수 있습니다. 또는 [GitHub의 기존 Astro 저장소에서 새 프로젝트를 시작](/ko/install-and-setup/#cli-마법사로-설치)할 수 있습니다.

  <PackageManagerTabs>
    <Fragment slot="npm">
    ```shell
    npm create astro@latest -- --template blog
    ```
    </Fragment>
    <Fragment slot="pnpm">
    ```shell
    pnpm create astro@latest --template blog
    ```
    </Fragment>
    <Fragment slot="yarn">
    ```shell
    yarn create astro --template blog
    ```
    </Fragment>
  </PackageManagerTabs>

[Markdown 또는 MDX 페이지를 생성](/ko/guides/markdown-content/)하기 위해 기존 Markdown (또는 선택적 통합이 포함된 MDX) 파일을 콘텐츠로 가져오세요.

파일 기반 라우팅 및 레이아웃 컴포넌트는 Astro와 유사하지만 파일 위치를 알아보려면 [Astro의 프로젝트 구조](/ko/basics/project-structure/)를 읽어보세요.

포트폴리오나 문서 사이트 등 다른 유형의 사이트를 변환하려면 [astro.new](https://astro.new)에서 더 많은 공식 시작 템플릿을 참조하세요. 각 프로젝트의 GitHub 저장소에 대한 링크는 물론 IDX, StackBlitz, CodeSandbox 및 Gitpod 온라인 개발 환경에서 작업 중인 프로젝트를 열 수 있는 원클릭 링크도 찾을 수 있습니다.

## 커뮤니티 리소스

<CardGrid>

  <LinkCard title="블로그를 SvelteKit에서 Astro로 재작성하기" href="https://kharann.com/blog/rewriting-my-blog/"/>

</CardGrid>

:::note[공유할 리소스가 있나요?]
SvelteKit 사이트에서 Astro로 전환하는 방법에 대한 유용한 비디오나 블로그 게시물을 찾았거나 직접 만들었다면, [이 목록](https://github.com/withastro/docs/edit/main/src/content/docs/en/guides/migrate-to-astro/from-sveltekit.mdx)에 추가해 주세요!
:::
